import validate from 'wechat-validate'

Page({
  // 通过 behaviors 注入 validate 方法
  behaviors: [validate],
  // 定义表单数据的验证规则
  rules: {
    houseId: [{ required: true, message: '请选择报修房屋' }],
    repairItemId: [{ required: true, message: '请选择维修项目' }],
    mobile: [
      { required: true, message: '请填写手机号码' },
      { pattern: /^1\d{10}$/, message: '请检查手机号码是否正确' },
    ],
    appointment: [{ required: true, message: '请选择预约日期' }],
    description: [{ required: true, message: '请填写问题描述' }],
  },
  data: {
    currentDate: new Date().getTime(),
    houseLayerVisible: false,
    repairLayerVisible: false,
    dateLayerVisible: false,
    houseList: [],
    // 后端返回房屋名称为 houseInfo
    houseInfo: '',
    repairList: [],
    // 后端返回维修项目名称为 repairItemName
    repairItemName: '',
    // -------后端所需的参数-----------
    id: undefined,
    houseId: '',
    repairItemId: '',
    mobile: '',
    appointment: '',
    description: '',
    attachment: [],
  },
  openHouseLayer() {
    this.setData({ houseLayerVisible: true })
  },
  closeHouseLayer() {
    this.setData({ houseLayerVisible: false })
  },
  openRepairLayer() {
    this.setData({ repairLayerVisible: true })
  },
  closeRepairLayer() {
    this.setData({
      repairLayerVisible: false,
    })
  },

  openDateLayer() {
    this.setData({ dateLayerVisible: true })
  },
  closeDateLayer() {
    this.setData({ dateLayerVisible: false })
  },
  goList() {
    wx.reLaunch({
      url: '/pkg_repair/pages/list/index',
    })
  },
  // ------ 自己写的代码 -------
  selectHouse(ev) {
    this.setData({
      houseInfo: ev.detail.name,
      houseId: ev.detail.id,
    })
  },
  selectRepair(ev) {
    this.setData({
      repairItemName: ev.detail.name,
      repairItemId: ev.detail.id,
    })
  },
  // 页面加载
  onLoad(query) {
    // 查询审核通过的房屋
    this.getHouseList()
    // 查询维修项目
    this.getRepairList()
    // 如果有 id 参数，说明是编辑页面
    if (query.id) {
      wx.setNavigationBarTitle({ title: '修改报修信息' })
      // 根据报修 id 获取报修详情
      this.getDetail(query.id)
    } else {
      // 设置页面标题
      wx.setNavigationBarTitle({ title: '填写报修信息' })
    }
  },
  // 根据报修 id 获取报修详情
  async getDetail(id) {
    const res = await wx.http.get(`/repair/${id}`)
    // res.data 直接更新到 data 上
    this.setData(res.data)
  },
  // 需查询审核通过的房屋
  async getHouseList() {
    // 注意：这里是 /house (审核通过的房屋列表)，而不是 /room (所有房屋列表)
    const res = await wx.http.get('/house')
    this.setData({
      houseList: res.data,
    })
  },
  async getRepairList() {
    const res = await wx.http.get('/repairItem')
    this.setData({
      repairList: res.data,
    })
  },
  // 选择日期
  confirmDate(ev) {
    // console.log('🟢 ev', ev.detail)
    // const date = new Date(ev.detail)
    // const year = date.getFullYear()
    // const month = date.getMonth() + 1
    // const day = date.getDate()
    // date.toLocaleDateString('zh-CN').replaceAll('/', '-')
    this.setData({
      appointment: wx.utils.formatDate(ev.detail),
      dateLayerVisible: false,
    })
  },
  // 选择文件后触发
  async afterRead(ev) {
    // console.log('🟢 ev', ev.detail.file.tempFilePath)
    // 小程序上传文件调用的是 wx.uploadFile()
    const res = await wx.http.upload('/upload', {
      name: 'file',
      filePath: ev.detail.file.tempFilePath,
    })
    // 更新 attachment 数组，将上传成功的图片展示到页面上
    this.setData({
      attachment: [...this.data.attachment, res.data],
    })
  },
  // 删除图片
  uploaderDelete(ev) {
    this.setData({
      attachment: this.data.attachment.filter((v, index) => index !== ev.detail.index),
    })
  },
  // 文件读取前
  beforeRead(ev) {
    // console.log('🟢 ev', ev)
    const { file, callback } = ev.detail
    // 文件大小限制
    if (file.size > 1024 * 1024 * 1) {
      wx.utils.toast('文件大小不能超过 1M')
      return callback(false)
    }
    callback(true)
  },
  // 提交表单
  async onSubmit() {
    // 校验所有 rules，如果不通过退出逻辑
    if (!this.validate()) return
    // 表单校验通过后发送请求
    const { id, houseId, repairItemId, mobile, appointment, description, attachment } = this.data
    // console.log('🟢 在线保修单参数', { id, houseId, repairItemId, mobile, appointment, description, attachment })
    // 发送请求, 提交在线保修单
    await wx.http.post('/repair', {
      id,
      houseId,
      repairItemId,
      mobile,
      appointment,
      description,
      attachment,
    })
    // 跳转到报修列表页面
    wx.redirectTo({
      url: '/pkg_repair/pages/list/index',
    })
  },
})
